<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选和二级联动</title>
    <style>
        #firstDiv{
            width: 60rem;
            height: 40rem;
            background-color: #eac;
            border: blue 2px outset;
            margin: 0 auto;
        }
        #userTable{
            width: 100%;
            border: black 1px solid;
            border-collapse: collapse;
        }
        td{
            border: black 1px solid;
        }
        .td_1{
            width: 8rem;
        }
        h2{
            text-align: center;
        }
        span{
            margin: 0 1rem;
        }
    </style>
</head>
<body>
<div id="firstDiv">
<table id="userTable">
    <tr>
        <td class="td_1">选择&nbsp;&nbsp;/&nbsp;&nbsp;全选<label><input type="checkbox" onclick="selectAll(this);"></label></td>
        <td>用户名</td>
        <td class="td_1">年龄</td>
        <td>电话</td>
    </tr>
    <tr>
        <td><label><input type="checkbox" name="isChoice"></label></td>
        <td>alice</td>
        <td>23</td>
        <td>13152458965</td>
    </tr>
    <tr>
        <td><label><input type="checkbox" name="isChoice"></label></td>
        <td>Allen</td>
        <td>24</td>
        <td>13152458965</td>
    </tr>
    <tr>
        <td><label><input type="checkbox" name="isChoice"></label></td>
        <td>adas</td>
        <td>23</td>
        <td>13152458965</td>
    </tr>
    <tr>
        <td><label><input type="checkbox" name="isChoice"></label></td>
        <td>fetew</td>
        <td>43</td>
        <td>13152458965</td>
    </tr>
    <tr>
        <td><label><input type="checkbox" name="isChoice"></label></td>
        <td>dsvx</td>
        <td>23</td>
        <td>13152458965</td>
    </tr>
</table>
    <hr/>
    <h2>联动选项</h2>
    <hr/>
    <span>
    <label>
        省份：
        <select id="selectProvince" onchange="changeProvince(this);">
            <option value="-1">-请选择省份-</option>
        </select>
    </label>
    </span>
    <span>
    <label>
        市区：
        <select id="selectCity" onchange="console.info(this.value);">
            <option value="-1">-请先选择省份-</option>
        </select>
    </label>
    </span>
</div>
</body>
<script type="text/javascript">
    function selectAll(selectBTN) {
       let arrayChoice = document.getElementsByName("isChoice");
       for (let key in arrayChoice){
           arrayChoice[key].checked = selectBTN.checked;
       }
    }
//    二级联动
    let province = ["黑龙江省","山东省","辽宁省","浙江省","吉林省","广东省","河南省","江西省","湖北省","湖南省"];
    let SP = document.getElementById("selectProvince");
    for (let key in province){
        let tempProvince = document.createElement("option");
        tempProvince.innerText = province[key];
        tempProvince.value = key;
        SP.appendChild(tempProvince);
    }
    let PCity = [];
    PCity.length = province.length;
    PCity[0] = ["哈尔滨","齐齐哈尔","大庆","七台河","牡丹江","黑河","绥化"];
    PCity[1] = ["济南","青岛","枣庄","济宁","日照","聊城","烟台"];
    PCity[2] = ["沈阳","大连","抚顺","锦州","辽阳","朝阳","丹东"];
    PCity[3] = ["杭州","温州","嘉兴","台州","衢州","绍兴","丽水"];
    PCity[4] = ["长春","四平","辽源","通化","白山","松原","白城"];
    PCity[5] = ["广州","韶关","珠海","佛山","江门","茂名","深圳"];
    PCity[6] = ["郑州","信阳","洛阳","开封","平顶山","许昌","周口"];
    PCity[7] = ["南昌","九江","景德镇","赣州","抚州","上饶","宜春"];
    PCity[8] = ["武汉","黄石","十堰","孝感","鄂州","荆门","咸宁"];
    PCity[9] = ["长沙","湘潭","衡阳","岳阳","常德","永州","怀化"];
    //选择省份
    function changeProvince(p) {
        let city = document.getElementById("selectCity");
        //如果第一个级联未选择
        if (p.value === "-1"){
            city.innerHTML = "<option value=\"-1\">-请先选择省份-</option>";
            return;
        }
        // console.info(PCity[p.value]);
        //清空二级选择框缓存
        city.options.length = 0;

        for (let index in PCity[p.value]){
            let tempCity = document.createElement("option");
            tempCity.innerText = PCity[p.value][index];
            tempCity.value = p.value + "-" + index;
            city.appendChild(tempCity);
        }
    }
</script>
</html>